@charset "utf-8";
@import "./mixins/_input.css";
@component-namespace t {
  @b input {
    width: 100%;
    line-height: var(--input-line-height);
    color: var(--input-color);
    font-size: var(--input-font-size);
    white-space: nowrap;
    cursor: default;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border: var(--input-border);
    background-color: var(--input-fill);
    outline: none;
    transition: var(--border-transition-base);
    border-radius: var(--border-radius-normal);
    &::placeholder {  
      color: var(--input-placeholder-color);
    }
    &:hover {
      border-color: var(--input-hover-border-color);
    }
    &:focus, &:active {
      border-color: var(--input-active-border-color);
      box-shadow: 0rem 0rem 0.05rem var(--color-light-blue);
    }
    @m mini {
      @mixin input-size var(--input-mini-padding-vertical), var(--input-mini-padding-horizontal), var(--input-mini-font-size), var(--input-border-radius);
      &::placeholder {  
        font-size: var(--assist-font-size-small);
      }
    }
    @m small {
      @mixin input-size var(--input-small-padding-vertical), var(--input-small-padding-horizontal), var(--input-small-font-size), var(--input-border-radius);
      &::placeholder {  
        font-size: var(--assist-font-size-small);
      }
    }
    @m large {
      @mixin input-size var(--input-large-padding-vertical), var(--input-large-padding-horizontal), var(--input-large-font-size), var(--input-border-radius);
      &::placeholder {  
        font-size: var(--assist-font-size-small);
      }
    }
    @m normal {
      @mixin input-size var(--input-normal-padding-vertical), var(--input-normal-padding-horizontal), var(--input-normal-font-size), var(--input-border-radius);
      &::placeholder {  
        font-size: var(--assist-font-size-small);
      }
    }
    @when disabled {
      @utils-user-select none;
      pointer-events: none;
      color: var(--input-disabled-color);
      border-color: var(--input-disabled-border);
      background-color: var(--input-disabled-fill);
      &::placeholder {
        color: var(--input-disabled-placeholder-color);
      }
    }
    @e wrapper {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}